<template>
  <!-- 侧边栏加横排按钮布局 -->
  <mxp-side-menu
    v-model="currIndex"
    :height="menuHeight"
    menuItemHeight="36px"
    menuBorderRadius="0px 4px 4px 0px"
    :menuBackground="sideMenuBackground"
    :menuList="menuList"
    labelKey="label"
    fontSize="12px"
    :inactiveColor="inactiveColor"
    :activeColor="activeColor"
  >
    <template v-if="currMeun && currMeun.child.length > 0">
      <view class="drop-down-list">
        <view
          v-for="(item, index) in currMeun.child"
          :key="index"
          class="drop-down-item"
          :style="
            currDefaultValue.includes(item.value)
              ? { background: itemActiveBackground, border: `1px solid ${activeColor}` }
              : { background: itemBackground, border: `1px solid ${itemBackground}` }
          "
          @click.stop.passive="subItemClick(item, index)"
        >
          <text class="item-text" :style="{ fontSize: itemFontSize, color: currDefaultValue.includes(item.value) ? activeColor : inactiveColor }">
            {{ item.label }}
          </text>
        </view>
      </view>
    </template>
    <template v-else>
      <view style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%" :style="{ height: menuHeight }">
        <image src="../../mxp-tool/static/images/global-state/not-data.svg" style="width: 120px; height: 120px" mode="scaleToFill"></image>
        <view>
          <text style="font-size: 14px" :style="{ color: inactiveColor }">暂无可选数据</text>
        </view>
      </view>
    </template>
  </mxp-side-menu>
</template>

<script lang="ts" setup>
  import MxpSideMenu from '@/mxp-ui/mxp-side-menu/mxp-side-menu.vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { type PropType, computed, ref } from 'vue';
  import type { $TrimDropDownMultipleListLevel2Item } from './type';
  defineOptions({
    name: 'item-type3',
  });

  const props = defineProps({
    /** 当 type 为 1,2,3,4 有效 */
    isAlone: { type: Boolean, required: true },
    /** 每一项的筛选数据 */
    menuList: { type: Object as PropType<$TrimDropDownMultipleListLevel2Item[]>, required: true },
    /** 未选中颜色 */
    inactiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 选中颜色颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 筛选列表的高度 */
    menuHeight: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 筛选 列表的每一项 的文字大小 */
    itemFontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 筛选列表每一项的背景色（仅针对 type为 2,3,4,7 有效） */
    itemBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 筛选列表每一项选中时的背景色 */
    itemActiveBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 侧边栏的背景色 */
    sideMenuBackground: { type: String as PropType<$AllColorStr>, required: true },
    /** 默认选中 */
    defaultValue: { type: [Array, Object] as PropType<Record<number | string, unknown[]> | unknown[] | undefined>, default: undefined },
  });
  const emits = defineEmits<{
    (e: 'click', selected: $TrimDropDownMultipleListLevel2Item['child'][number], key: number | string, menuIndex: number, menuChildIndex: number): void;
  }>();

  const currIndex = ref<number>(0);
  const currMeun = computed<$TrimDropDownMultipleListLevel2Item | undefined>(() => props.menuList[currIndex.value]);
  const currDefaultValue = computed<unknown[]>(() => {
    let def: unknown[] = [];
    if (props.isAlone) {
      const olddef = props.defaultValue as Record<number | string, unknown[]>;
      def = currMeun.value && olddef[currMeun.value.key] ? olddef[currMeun.value.key]! : [];
    } else {
      def = props.defaultValue as unknown[];
    }
    return def;
  });

  /** 点击事件 */
  function subItemClick(item: $TrimDropDownMultipleListLevel2Item['child'][number], menuChildIndex: number) {
    emits('click', item, props.menuList[currIndex.value]!.key, currIndex.value, menuChildIndex);
  }
</script>

<style scoped lang="scss">
  .drop-down-list {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;

    .drop-down-item {
      display: inline-flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-between;
      padding: 6px 15px;
      margin: 6px;
      color: #333333;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      transition:
        background 0.3s,
        border 0.3s;

      .item-text {
        transition: color 0.3s;
      }
    }
  }
</style>
